<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import messageApi from '@/api/Message_api.js'
import loginApi from '@/api/Login_api.js'

// 当前用户ID
const currentUserId = ref(null)

// 筛选条件
const filter = reactive({
  type: 'ALL',
  isRead: 'ALL'
})

// 分页数据
const pagination = reactive({
  current: 1,
  limit: 10,
  total: 0
})

// 消息列表
const messages = ref([])
// 加载状态
const loading = ref(false)

// 获取当前用户信息
const getCurrentUser = async () => {
  try {
    const userInfo = await loginApi.loginInfo()
    currentUserId.value = userInfo.id
    loadMessages()
  } catch (error) {
    ElMessage.error('获取用户信息失败')
  }
}

// 加载消息列表
const loadMessages = async () => {
  if (!currentUserId.value) {
    return
  }

  loading.value = true

  try {
    let response
    if (filter.type === 'ALL') {
      response = await messageApi.getMessages(
          currentUserId.value,
          pagination.current,
          pagination.limit
      )
    } else {
      response = await messageApi.getMessagesByType(
          currentUserId.value,
          filter.type,
          pagination.current,
          pagination.limit
      )
    }

    messages.value = response.data || []
    pagination.total = response.count || 0

    if (filter.isRead !== 'ALL') {
      const readStatus = filter.isRead === 'READ'
      messages.value = messages.value.filter(msg =>
          readStatus ? msg.isRead === 1 : msg.isRead === 0
      )
    }
  } catch (error) {
    ElMessage.error('加载消息失败: ' + (error.response?.data?.msg || error.message))
  } finally {
    loading.value = false
  }
}

// 处理页码变化
const handleCurrentChange = (current) => {
  pagination.current = current
  loadMessages()
}

// 处理筛选条件变化
const handleFilterChange = () => {
  pagination.current = 1
  loadMessages()
}

// 标记消息为已读
const markAsRead = async (message) => {
  try {
    await messageApi.markAsRead([message.id])
    message.isRead = 1
    ElMessage.success('标记为已读成功')
  } catch (error) {
    ElMessage.error('标记为已读失败')
  }
}

// 批量标记为已读
const batchMarkAsRead = async () => {
  const unreadMessages = messages.value.filter(msg => msg.isRead === 0)
  if (unreadMessages.length === 0) {
    ElMessage.warning('没有未读消息')
    return
  }

  try {
    const ids = unreadMessages.map(msg => msg.id)
    await messageApi.markAsRead(ids)
    unreadMessages.forEach(msg => { msg.isRead = 1 })
    ElMessage.success(`已标记 ${unreadMessages.length} 条消息为已读`)
  } catch (error) {
    ElMessage.error('批量标记为已读失败')
  }
}

// 删除消息
const deleteMessage = async (message) => {
  try {
    await ElMessageBox.confirm('确定要删除这条消息吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await messageApi.deleteMessage(message.id)
    ElMessage.success('删除成功')
    loadMessages()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除消息失败')
    }
  }
}

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return ''
  const date = timestamp instanceof Date ? timestamp : new Date(timestamp)
  return isNaN(date.getTime()) ? '' :
      `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}

// 获取消息类型标签
const getMessageTypeLabel = (type) => {
  const typeMap = {
    'LIKE': '点赞',
    'COMMENT': '评论',
    'REVIEW': '审核',
    'FOLLOW': '关注'
  }
  return typeMap[type] || type
}

// 获取消息类型样式
const getMessageTypeClass = (type) => {
  const classMap = {
    'LIKE': 'type-like',
    'COMMENT': 'type-comment',
    'REVIEW': 'type-review',
    'FOLLOW': 'type-follow'
  }
  return classMap[type] || ''
}

onMounted(() => {
  getCurrentUser()
})
</script>

<template>
  <div class="message-center">
    <div class="message-header">
      <h2>消息中心</h2>
    </div>

    <div class="filter-bar">
      <el-select v-model="filter.isRead" placeholder="阅读状态" @change="handleFilterChange">
        <el-option label="全部" value="ALL" />
        <el-option label="未读" value="UNREAD" />
        <el-option label="已读" value="READ" />
      </el-select>

      <el-button type="primary" @click="batchMarkAsRead">标记所有未读为已读</el-button>
      <el-button @click="loadMessages" :loading="loading">刷新</el-button>
    </div>

    <div class="message-list" v-loading="loading">
      <div v-if="messages.length === 0" class="empty-message">
        <el-empty description="暂无消息" />
      </div>

      <div v-else class="message-items">
        <div
            v-for="message in messages"
            :key="message.id"
            :class="['message-item', { unread: message.isRead === 0 }]"
        >
          <div class="message-content">
            <div class="message-header">
              <span :class="['message-type', getMessageTypeClass(message.msgType)]">
                {{ getMessageTypeLabel(message.msgType) }}
              </span>
              <span class="message-time">{{ formatTime(message.createTime) }}</span>
            </div>
            <div class="message-body">
              <p>{{ message.content }}</p>
            </div>
          </div>
          <div class="message-actions">
            <el-button
                v-if="message.isRead === 0"
                size="small"
                @click="markAsRead(message)"
            >
              标记已读
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="deleteMessage(message)"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>

      <div class="pagination">
        <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.limit"
            :page-sizes="[5, 10, 20, 50]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleFilterChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.message-center {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  min-height: 600px;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.message-header h2 {
  margin: 0;
  color: #303133;
}

.filter-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.message-list {
  min-height: 400px;
}

.empty-message {
  padding: 60px 0;
}

.message-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  transition: all 0.3s;
}

.message-item.unread {
  background-color: #f5f7fa;
  border-left: 4px solid #409eff;
}

.message-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.message-type {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.type-like {
  background-color: #fde2e2;
  color: #f56c6c;
}

.type-comment {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.type-review {
  background-color: #f0f9eb;
  color: #67c23a;
}

.type-follow {
  background-color: #edf4ff;
  color: #409eff;
}

.message-time {
  font-size: 12px;
  color: #909399;
}

.message-body p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}

.message-actions {
  display: flex;
  gap: 8px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .message-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .message-actions {
    align-self: flex-end;
  }

  .filter-bar {
    flex-wrap: wrap;
  }
}
</style>
<!--<script setup>-->
<!--import { ref, reactive, onMounted, computed } from 'vue'-->
<!--import { ElMessage, ElMessageBox } from 'element-plus'-->
<!--import messageApi from '@/api/Message_api.js'-->
<!--import loginApi from '@/api/Login_api.js'-->

<!--// 调试模式-->
<!--const debugMode = ref(true)-->
<!--// 当前用户ID-->
<!--const currentUserId = ref(null)-->
<!--// 消息类型选项-->
<!--const messageTypes = ref([-->
<!--  { value: 'ALL', label: '全部消息' },-->
<!--  { value: 'LIKE', label: '点赞消息' },-->
<!--  { value: 'COMMENT', label: '评论消息' },-->
<!--  { value: 'REVIEW', label: '审核消息' }-->
<!--])-->

<!--// 筛选条件-->
<!--const filter = reactive({-->
<!--  type: 'ALL',-->
<!--  isRead: 'ALL'-->
<!--})-->

<!--// 分页数据-->
<!--const pagination = reactive({-->
<!--  current: 1,-->
<!--  limit: 10,-->
<!--  total: 0-->
<!--})-->

<!--// 消息列表-->
<!--const messages = ref([])-->
<!--// 加载状态-->
<!--const loading = ref(false)-->
<!--// 未读消息统计-->
<!--const unreadStats = reactive({-->
<!--  total: 0,-->
<!--  like: 0,-->
<!--  comment: 0,-->
<!--  review: 0-->
<!--})-->

<!--// 调试信息-->
<!--const debugInfo = reactive({-->
<!--  apiCalls: [],-->
<!--  errors: []-->
<!--})-->

<!--// 记录API调用-->
<!--const logApiCall = (method, url, params, response) => {-->
<!--  if (debugMode.value) {-->
<!--    debugInfo.apiCalls.unshift({-->
<!--      timestamp: new Date().toISOString(),-->
<!--      method,-->
<!--      url,-->
<!--      params,-->
<!--      response: response ? JSON.stringify(response).substring(0, 200) + '...' : 'No response'-->
<!--    })-->

<!--    // 只保留最近的10条记录-->
<!--    if (debugInfo.apiCalls.length > 10) {-->
<!--      debugInfo.apiCalls.pop()-->
<!--    }-->
<!--  }-->
<!--}-->

<!--// 记录错误-->
<!--const logError = (method, error) => {-->
<!--  if (debugMode.value) {-->
<!--    debugInfo.errors.unshift({-->
<!--      timestamp: new Date().toISOString(),-->
<!--      method,-->
<!--      error: error.message || String(error)-->
<!--    })-->

<!--    // 只保留最近的10条错误-->
<!--    if (debugInfo.errors.length > 10) {-->
<!--      debugInfo.errors.pop()-->
<!--    }-->
<!--  }-->
<!--}-->

<!--// 获取当前用户信息-->
<!--const getCurrentUser = async () => {-->
<!--  try {-->
<!--    console.log('获取用户信息...')-->
<!--    const userInfo = await loginApi.loginInfo()-->
<!--    console.log('用户信息:', userInfo)-->
<!--    currentUserId.value = userInfo.id-->
<!--    logApiCall('loginApi.loginInfo', '/api/login/logininfo', {}, userInfo)-->
<!--    loadUnreadStats()-->
<!--    loadMessages()-->
<!--  } catch (error) {-->
<!--    console.error('获取用户信息失败', error)-->
<!--    logError('getCurrentUser', error)-->
<!--    ElMessage.error('获取用户信息失败')-->
<!--  }-->
<!--}-->

<!--// 加载未读消息统计-->
<!--const loadUnreadStats = async () => {-->
<!--  try {-->
<!--    console.log('加载未读统计，用户ID:', currentUserId.value)-->
<!--    unreadStats.total = await messageApi.getUnreadCount(currentUserId.value)-->
<!--    unreadStats.like = await messageApi.getUnreadCountByType(currentUserId.value, 'LIKE')-->
<!--    unreadStats.comment = await messageApi.getUnreadCountByType(currentUserId.value, 'COMMENT')-->
<!--    unreadStats.review = await messageApi.getUnreadCountByType(currentUserId.value, 'REVIEW')-->

<!--    console.log('未读统计:', unreadStats)-->
<!--    logApiCall('getUnreadCount', '/api/messages/unreadCount', { receiverId: currentUserId.value }, unreadStats)-->
<!--  } catch (error) {-->
<!--    console.error('获取未读消息统计失败', error)-->
<!--    logError('loadUnreadStats', error)-->
<!--    // 不显示错误消息，避免干扰用户-->
<!--  }-->
<!--}-->

<!--// 加载消息列表-->
<!--const loadMessages = async () => {-->
<!--  if (!currentUserId.value) {-->
<!--    console.warn('用户ID为空，无法加载消息')-->
<!--    return-->
<!--  }-->

<!--  loading.value = true-->
<!--  console.log('加载消息，过滤器:', filter, '分页:', pagination)-->

<!--  try {-->
<!--    let response-->
<!--    if (filter.type === 'ALL') {-->
<!--      response = await messageApi.getMessages(-->
<!--          currentUserId.value,-->
<!--          pagination.current,-->
<!--          pagination.limit-->
<!--      )-->
<!--      logApiCall('getMessages', '/api/messages/list', {-->
<!--        receiverId: currentUserId.value,-->
<!--        page: pagination.current,-->
<!--        limit: pagination.limit-->
<!--      }, response)-->
<!--    } else {-->
<!--      response = await messageApi.getMessagesByType(-->
<!--          currentUserId.value,-->
<!--          filter.type,-->
<!--          pagination.current,-->
<!--          pagination.limit-->
<!--      )-->
<!--      logApiCall('getMessagesByType', '/api/messages/listByType', {-->
<!--        receiverId: currentUserId.value,-->
<!--        msgType: filter.type,-->
<!--        page: pagination.current,-->
<!--        limit: pagination.limit-->
<!--      }, response)-->
<!--    }-->

<!--    console.log('API响应:', response)-->
<!--    messages.value = response.data || []-->
<!--    pagination.total = response.count || 0-->

<!--    // 过滤已读/未读-->
<!--    if (filter.isRead !== 'ALL') {-->
<!--      const readStatus = filter.isRead === 'READ'-->
<!--      messages.value = messages.value.filter(msg =>-->
<!--          readStatus ? msg.isRead === 1 : msg.isRead === 0-->
<!--      )-->
<!--    }-->

<!--    console.log('处理后的消息列表:', messages.value)-->
<!--  } catch (error) {-->
<!--    console.error('加载消息失败', error)-->
<!--    logError('loadMessages', error)-->
<!--    ElMessage.error('加载消息失败: ' + (error.response?.data?.msg || error.message))-->
<!--  } finally {-->
<!--    loading.value = false-->
<!--  }-->
<!--}-->

<!--// 处理页码变化-->
<!--const handleCurrentChange = (current) => {-->
<!--  pagination.current = current-->
<!--  loadMessages()-->
<!--}-->

<!--// 处理筛选条件变化-->
<!--const handleFilterChange = () => {-->
<!--  pagination.current = 1-->
<!--  loadMessages()-->
<!--}-->

<!--// 标记消息为已读-->
<!--const markAsRead = async (message) => {-->
<!--  try {-->
<!--    console.log('标记消息为已读:', message.id)-->
<!--    const response = await messageApi.markAsRead([message.id])-->
<!--    logApiCall('markAsRead', '/api/messages/markAsRead', { ids: [message.id] }, response)-->
<!--    message.isRead = 1-->
<!--    loadUnreadStats()-->
<!--    ElMessage.success('标记为已读成功')-->
<!--  } catch (error) {-->
<!--    console.error('标记为已读失败', error)-->
<!--    logError('markAsRead', error)-->
<!--    ElMessage.error('标记为已读失败')-->
<!--  }-->
<!--}-->

<!--// 批量标记为已读-->
<!--const batchMarkAsRead = async () => {-->
<!--  const unreadMessages = messages.value.filter(msg => msg.isRead === 0)-->
<!--  if (unreadMessages.length === 0) {-->
<!--    ElMessage.warning('没有未读消息')-->
<!--    return-->
<!--  }-->

<!--  try {-->
<!--    const ids = unreadMessages.map(msg => msg.id)-->
<!--    console.log('批量标记为已读:', ids)-->
<!--    const response = await messageApi.markAsRead(ids)-->
<!--    logApiCall('markAsRead', '/api/messages/markAsRead', { ids }, response)-->
<!--    unreadMessages.forEach(msg => { msg.isRead = 1 })-->
<!--    loadUnreadStats()-->
<!--    ElMessage.success(`已标记 ${unreadMessages.length} 条消息为已读`)-->
<!--  } catch (error) {-->
<!--    console.error('批量标记为已读失败', error)-->
<!--    logError('batchMarkAsRead', error)-->
<!--    ElMessage.error('批量标记为已读失败')-->
<!--  }-->
<!--}-->

<!--// 删除消息-->
<!--const deleteMessage = async (message) => {-->
<!--  try {-->
<!--    await ElMessageBox.confirm('确定要删除这条消息吗？', '提示', {-->
<!--      confirmButtonText: '确定',-->
<!--      cancelButtonText: '取消',-->
<!--      type: 'warning'-->
<!--    })-->

<!--    console.log('删除消息:', message.id)-->
<!--    const response = await messageApi.deleteMessage(message.id)-->
<!--    logApiCall('deleteMessage', '/api/messages/delete', { id: message.id }, response)-->
<!--    ElMessage.success('删除成功')-->
<!--    loadMessages()-->
<!--  } catch (error) {-->
<!--    if (error !== 'cancel') {-->
<!--      console.error('删除消息失败', error)-->
<!--      logError('deleteMessage', error)-->
<!--      ElMessage.error('删除消息失败')-->
<!--    }-->
<!--  }-->
<!--}-->

<!--// 格式化时间-->
<!--const formatTime = (timestamp) => {-->
<!--  if (!timestamp) return ''-->
<!--  // 假设时间戳可能是字符串或数字-->
<!--  const date = timestamp instanceof Date ? timestamp : new Date(timestamp)-->
<!--  return isNaN(date.getTime()) ? '' :-->
<!--      `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`-->
<!--}-->

<!--// 获取消息类型标签-->
<!--const getMessageTypeLabel = (type) => {-->
<!--  const typeMap = {-->
<!--    'LIKE': '点赞',-->
<!--    'COMMENT': '评论',-->
<!--    'REVIEW': '审核',-->
<!--    'FOLLOW': '关注'-->
<!--  }-->
<!--  return typeMap[type] || type-->
<!--}-->

<!--// 获取消息类型样式-->
<!--const getMessageTypeClass = (type) => {-->
<!--  const classMap = {-->
<!--    'LIKE': 'type-like',-->
<!--    'COMMENT': 'type-comment',-->
<!--    'REVIEW': 'type-review',-->
<!--    'FOLLOW': 'type-follow'-->
<!--  }-->
<!--  return classMap[type] || ''-->
<!--}-->

<!--// 清除调试信息-->
<!--const clearDebugInfo = () => {-->
<!--  debugInfo.apiCalls = []-->
<!--  debugInfo.errors = []-->
<!--}-->

<!--// 切换调试模式-->
<!--const toggleDebugMode = () => {-->
<!--  debugMode.value = !debugMode.value-->
<!--  if (!debugMode.value) {-->
<!--    clearDebugInfo()-->
<!--  }-->
<!--}-->

<!--onMounted(() => {-->
<!--  console.log('MessageCenter组件已挂载')-->
<!--  getCurrentUser()-->
<!--})-->
<!--</script>-->

<!--<template>-->
<!--  <div class="message-center">-->
<!--    <div class="message-header">-->
<!--      <h2>消息中心</h2>-->
<!--&lt;!&ndash;      <div class="stats">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-tag type="info">全部: {{ unreadStats.total }} 未读</el-tag>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-tag type="danger">点赞: {{ unreadStats.like }} 未读</el-tag>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-tag type="warning">评论: {{ unreadStats.comment }} 未读</el-tag>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-tag type="success">审核: {{ unreadStats.review }} 未读</el-tag>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-button size="small" @click="toggleDebugMode" class="debug-btn">&ndash;&gt;-->
<!--&lt;!&ndash;          {{ debugMode ? '关闭调试' : '开启调试' }}&ndash;&gt;-->
<!--&lt;!&ndash;        </el-button>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--    </div>-->

<!--    <div class="filter-bar">-->
<!--&lt;!&ndash;      <el-select v-model="filter.type" placeholder="消息类型" @change="handleFilterChange">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-option&ndash;&gt;-->
<!--&lt;!&ndash;            v-for="item in messageTypes"&ndash;&gt;-->
<!--&lt;!&ndash;            :key="item.value"&ndash;&gt;-->
<!--&lt;!&ndash;            :label="item.label"&ndash;&gt;-->
<!--&lt;!&ndash;            :value="item.value"&ndash;&gt;-->
<!--&lt;!&ndash;        />&ndash;&gt;-->
<!--&lt;!&ndash;      </el-select>&ndash;&gt;-->

<!--      <el-select v-model="filter.isRead" placeholder="阅读状态" @change="handleFilterChange">-->
<!--        <el-option label="全部" value="ALL" />-->
<!--        <el-option label="未读" value="UNREAD" />-->
<!--        <el-option label="已读" value="READ" />-->
<!--      </el-select>-->

<!--      <el-button type="primary" @click="batchMarkAsRead">标记所有未读为已读</el-button>-->
<!--      <el-button @click="loadMessages" :loading="loading">刷新</el-button>-->
<!--    </div>-->

<!--    &lt;!&ndash; 调试信息面板 &ndash;&gt;-->
<!--&lt;!&ndash;    <div v-if="debugMode" class="debug-panel">&ndash;&gt;-->
<!--&lt;!&ndash;      <el-collapse>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-collapse-item title="API调用记录">&ndash;&gt;-->
<!--&lt;!&ndash;          <div v-for="(call, index) in debugInfo.apiCalls" :key="index" class="debug-item">&ndash;&gt;-->
<!--&lt;!&ndash;            <div><strong>{{ call.timestamp }}</strong> {{ call.method }} {{ call.url }}</div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div>参数: {{ JSON.stringify(call.params) }}</div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div>响应: {{ call.response }}</div>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div v-if="debugInfo.apiCalls.length === 0">暂无API调用记录</div>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-collapse-item>&ndash;&gt;-->

<!--&lt;!&ndash;        <el-collapse-item title="错误记录">&ndash;&gt;-->
<!--&lt;!&ndash;          <div v-for="(error, index) in debugInfo.errors" :key="index" class="debug-item error">&ndash;&gt;-->
<!--&lt;!&ndash;            <div><strong>{{ error.timestamp }}</strong> {{ error.method }}</div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div>错误: {{ error.error }}</div>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div v-if="debugInfo.errors.length === 0">暂无错误记录</div>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-collapse-item>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-collapse>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->

<!--    <div class="message-list" v-loading="loading">-->
<!--      <div v-if="messages.length === 0" class="empty-message">-->
<!--        <el-empty description="暂无消息" />-->
<!--      </div>-->

<!--      <div v-else class="message-items">-->
<!--        <div-->
<!--            v-for="message in messages"-->
<!--            :key="message.id"-->
<!--            :class="['message-item', { unread: message.isRead === 0 }]"-->
<!--        >-->
<!--          <div class="message-content">-->
<!--            <div class="message-header">-->
<!--              <span :class="['message-type', getMessageTypeClass(message.msgType)]">-->
<!--                {{ getMessageTypeLabel(message.msgType) }}-->
<!--              </span>-->
<!--              <span class="message-time">{{ formatTime(message.createTime) }}</span>-->
<!--            </div>-->
<!--            <div class="message-body">-->
<!--              <p>{{ message.content }}</p>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="message-actions">-->
<!--            <el-button-->
<!--                v-if="message.isRead === 0"-->
<!--                size="small"-->
<!--                @click="markAsRead(message)"-->
<!--            >-->
<!--              标记已读-->
<!--            </el-button>-->
<!--            <el-button-->
<!--                size="small"-->
<!--                type="danger"-->
<!--                @click="deleteMessage(message)"-->
<!--            >-->
<!--              删除-->
<!--            </el-button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="pagination">-->
<!--        <el-pagination-->
<!--            v-model:current-page="pagination.current"-->
<!--            v-model:page-size="pagination.limit"-->
<!--            :page-sizes="[5, 10, 20, 50]"-->
<!--            :total="pagination.total"-->
<!--            layout="total, sizes, prev, pager, next, jumper"-->
<!--            @size-change="handleFilterChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--        />-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<style scoped>-->
<!--.message-center {-->
<!--  padding: 20px;-->
<!--  background: #fff;-->
<!--  border-radius: 8px;-->
<!--  min-height: 600px;-->
<!--}-->

<!--.message-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  margin-bottom: 20px;-->
<!--  padding-bottom: 15px;-->
<!--  border-bottom: 1px solid #eee;-->
<!--}-->

<!--.message-header h2 {-->
<!--  margin: 0;-->
<!--  color: #303133;-->
<!--}-->

<!--.stats {-->
<!--  display: flex;-->
<!--  gap: 10px;-->
<!--  align-items: center;-->
<!--  flex-wrap: wrap;-->
<!--}-->

<!--.debug-btn {-->
<!--  margin-left: 10px;-->
<!--}-->

<!--.filter-bar {-->
<!--  display: flex;-->
<!--  gap: 15px;-->
<!--  margin-bottom: 20px;-->
<!--  align-items: center;-->
<!--  flex-wrap: wrap;-->
<!--}-->

<!--.debug-panel {-->
<!--  margin-bottom: 20px;-->
<!--  border: 1px solid #e6e6e6;-->
<!--  border-radius: 4px;-->
<!--  padding: 10px;-->
<!--  background: #f9f9f9;-->
<!--}-->

<!--.debug-item {-->
<!--  padding: 8px;-->
<!--  margin-bottom: 8px;-->
<!--  border-bottom: 1px solid #eee;-->
<!--  font-family: monospace;-->
<!--  font-size: 12px;-->
<!--}-->

<!--.debug-item.error {-->
<!--  background-color: #fff2f0;-->
<!--  border-left: 3px solid #ff4d4f;-->
<!--}-->

<!--.message-list {-->
<!--  min-height: 400px;-->
<!--}-->

<!--.empty-message {-->
<!--  padding: 60px 0;-->
<!--}-->

<!--.message-items {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  gap: 15px;-->
<!--}-->

<!--.message-item {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  padding: 16px;-->
<!--  border: 1px solid #ebeef5;-->
<!--  border-radius: 4px;-->
<!--  transition: all 0.3s;-->
<!--}-->

<!--.message-item.unread {-->
<!--  background-color: #f5f7fa;-->
<!--  border-left: 4px solid #409eff;-->
<!--}-->

<!--.message-item:hover {-->
<!--  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.message-content {-->
<!--  flex: 1;-->
<!--}-->

<!--.message-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  margin-bottom: 8px;-->
<!--}-->

<!--.message-type {-->
<!--  padding: 2px 8px;-->
<!--  border-radius: 4px;-->
<!--  font-size: 12px;-->
<!--  font-weight: bold;-->
<!--}-->

<!--.type-like {-->
<!--  background-color: #fde2e2;-->
<!--  color: #f56c6c;-->
<!--}-->

<!--.type-comment {-->
<!--  background-color: #fdf6ec;-->
<!--  color: #e6a23c;-->
<!--}-->

<!--.type-review {-->
<!--  background-color: #f0f9eb;-->
<!--  color: #67c23a;-->
<!--}-->

<!--.type-follow {-->
<!--  background-color: #edf4ff;-->
<!--  color: #409eff;-->
<!--}-->

<!--.message-time {-->
<!--  font-size: 12px;-->
<!--  color: #909399;-->
<!--}-->

<!--.message-body p {-->
<!--  margin: 0;-->
<!--  color: #606266;-->
<!--  line-height: 1.6;-->
<!--}-->

<!--.message-actions {-->
<!--  display: flex;-->
<!--  gap: 8px;-->
<!--}-->

<!--.pagination {-->
<!--  margin-top: 20px;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--}-->

<!--@media (max-width: 768px) {-->
<!--  .message-item {-->
<!--    flex-direction: column;-->
<!--    align-items: flex-start;-->
<!--    gap: 12px;-->
<!--  }-->

<!--  .message-actions {-->
<!--    align-self: flex-end;-->
<!--  }-->

<!--  .stats {-->
<!--    flex-wrap: wrap;-->
<!--  }-->

<!--  .filter-bar {-->
<!--    flex-wrap: wrap;-->
<!--  }-->
<!--}-->
<!--</style>-->